<template>
  <div id="asideBar">
    <div class="logo">
      <img src="../../public/images/logo.png" alt="" />
      <p>厚浦外卖管理系统</p>
    </div>

    <el-row class="tac">
      <el-col :span="12" class="elCol">
        <!-- <h5 class="mb-2">Default colors</h5> -->
        <el-menu
          @select="handleSelect"
          color="while"
          background-color="rgb(25, 99, 172)"
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          unique-opened="true"
          router="true"
        >
          <el-menu-item index="/index/main">
            <el-icon><span class="iconfont icon-31shouyexuanzhong"></span></el-icon>
            <span>后台首页</span>
          </el-menu-item>
          <el-menu-item index="/index/order">
            <el-icon><span class="iconfont icon-dingdan"></span> </el-icon>
            <span>订单管理</span>
          </el-menu-item>

          <el-sub-menu index="/goods/list">
            <template #title>
              <el-icon style="color: aliceblue"
                ><span class="iconfont icon-shangpin"></span
              ></el-icon>
              <span style="color: aliceblue" @click.stop="handleGoods">商品管理</span>
            </template>
            <el-menu-item index="/goods/list">商品列表</el-menu-item>
            <el-menu-item index="/goods/add">商品添加</el-menu-item>
            <el-menu-item index="/goods/category">商品分类</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/shop" v-if="userRole === 'super'">
            <el-icon><span class="iconfont icon-dianpu"></span></el-icon>
            <span>店铺管理</span>
          </el-menu-item>

          <el-sub-menu index="/user/list">
            <template #title>
              <el-icon style="color: aliceblue"
                ><span class="iconfont icon-zhanghaozhongxinzhanghaoguanli"></span>
              </el-icon>
              <span style="color: aliceblue" @click.stop="handleUser">账号管理</span>
            </template>
            <el-menu-item index="/user/list">账号列表</el-menu-item>
            <el-menu-item v-if="userRole === 'super'" index="/user/add">账号添加</el-menu-item>
            <el-menu-item index="/user/edit">修改密码</el-menu-item>
            <el-menu-item index="/user/home">个人中心</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/goods/total" v-if="userRole === 'super'">
            <template #title>
              <div style="width: 100%; height: 100%; z-index: 10" @click.stop="handleTotal">
                <el-icon style="color: aliceblue"
                  ><span class="iconfont icon-a-icon-xiaoshoue-fuben"></span
                ></el-icon>
                <span style="color: aliceblue">销售统计</span>
              </div>
            </template>
            <el-menu-item index="/goods/total">商品统计</el-menu-item>
            <el-menu-item index="/order/total">订单统计</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
// import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { onMounted, ref, watch, onBeforeMount } from 'vue'
const activeIndex = ref('/index')
const userRole = ref('')
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}

// 获取当前路由和路由实例
const route = useRoute()
const router = useRouter()

// 监听路由变化，更新激活索引
watch(route, (newRoute) => {
  // 根据路由路径设置激活索引
  activeIndex.value = newRoute.path
})

onBeforeMount(() => {
  userRole.value = JSON.parse(localStorage.getItem('user')).role
})
// 从本地存储中读取激活索引，并在页面加载时设置
onMounted(() => {
  const storedIndex = localStorage.getItem('activeIndex')
  if (storedIndex) {
    activeIndex.value = storedIndex
  }
})
// 导航守卫，用于在路由变化后更新本地存储
router.afterEach((to, from) => {
  // 将新的激活索引保存到本地存储
  localStorage.setItem('activeIndex', to.path)
})

const handleGoods = () => {
  router.push({
    path: '/goods/list',
  })
}
const handleUser = () => {
  router.push({
    path: '/user/list',
  })
}
const handleTotal = () => {
  router.push({
    path: '/goods/total',
  })
}
// const router = useRouter()
// const handleIndex = ()=>{
//   router.push({
//     path:'/index/main'
//   })
// }
// const handleOrder = ()=>{
//   router.push({
//     path:'/index/order'
//   })
// }
// const handleGoodsList = ()=>{
//   router.push({
//     path:'/goods/list'
//   })
//   activeIndex.value = '3-1'
// }
// const handleGoodsAdd = ()=>{
//   router.push({
//     path:'/goods/add'
//   })
//   activeIndex.value = '3-2'
// }
// const handleGoodsCategory = ()=>{
//   router.push({
//     path:'/goods/category'
//   })
//   activeIndex.value = '3-3'
// }
// const handleShop = ()=>{
//   router.push({
//     path:'/shop'
//   })
// }

function beforeMount(arg0: () => void) {
  throw new Error('Function not implemented.')
}
</script>

<style scoped>
#asideBar {
  width: 100%;
  height: 100%;
  background-color: rgb(25, 99, 172);
  .logo {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 45%;
    }
    p {
      color: white;
      font-weight: 600;
    }
  }
  .tac {
    width: 100%;
    height: auto;
    .elCol {
      width: 100%;

      .el-menu-item {
        color: aliceblue;
      }
      .is-active {
        color: rgb(14, 160, 71);
      }
      .el-sub-menu__title * {
        vertical-align: bottom;
        color: white;
      }
      .el-sub-menu__title {
        color: aliceblue !important;
      }
    }
    .el-menu {
      width: 100%;
      --el-menu-text-color: white;
      .el-sub-menu__title {
        color: aliceblue;
      }
    }
    .el-col-12 {
      max-width: 100%;
    }
  }
}
</style>
